<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/page/9/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-CSS基础知识点-CSS样式命名" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/01/CSS基础知识点-CSS样式命名/" class="article-date">
  <time datetime="2019-08-01T05:58:44.000Z" itemprop="datePublished">2019-08-01</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/01/CSS基础知识点-CSS样式命名/">CSS基础知识点--CSS样式命名</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<ol>
<li>页面结构</li>
</ol>
<table>
<thead>
<tr>
<th>结构</th>
<th>英文命名</th>
</tr>
</thead>
<tbody><tr>
<td>页头</td>
<td>header</td>
</tr>
<tr>
<td>导航</td>
<td>nav</td>
</tr>
<tr>
<td>页面主体</td>
<td>main</td>
</tr>
<tr>
<td>侧栏</td>
<td>sidebar</td>
</tr>
<tr>
<td>页尾</td>
<td>footer</td>
</tr>
<tr>
<td>栏目</td>
<td>column</td>
</tr>
<tr>
<td>内容</td>
<td>content/container</td>
</tr>
<tr>
<td>页面外围控制</td>
<td>wrapper</td>
</tr>
<tr>
<td>容器</td>
<td>container</td>
</tr>
<tr>
<td>左右中</td>
<td>left right center</td>
</tr>
</tbody></table>
<ol start="2">
<li>导航</li>
</ol>
<table>
<thead>
<tr>
<th>位置</th>
<th>英文命名</th>
</tr>
</thead>
<tbody><tr>
<td>导航</td>
<td>nav</td>
</tr>
<tr>
<td>左导航</td>
<td>leftSidebar</td>
</tr>
<tr>
<td>主导航</td>
<td>mainNav</td>
</tr>
<tr>
<td>右导航</td>
<td>rightSidebar</td>
</tr>
<tr>
<td>子导航</td>
<td>subNav</td>
</tr>
<tr>
<td>菜单</td>
<td>menu</td>
</tr>
<tr>
<td>顶导航</td>
<td>topNav</td>
</tr>
<tr>
<td>子菜单</td>
<td>subMenu</td>
</tr>
<tr>
<td>边导航</td>
<td>sidebar</td>
</tr>
<tr>
<td>标题</td>
<td>title</td>
</tr>
<tr>
<td>摘要</td>
<td>summary</td>
</tr>
</tbody></table>
<ol start="3">
<li>功能</li>
</ol>
<table>
<thead>
<tr>
<th>功能</th>
<th>英文命名</th>
</tr>
</thead>
<tbody><tr>
<td>标志</td>
<td>logo</td>
</tr>
<tr>
<td>注册</td>
<td>register</td>
</tr>
<tr>
<td>广告</td>
<td>banner</td>
</tr>
<tr>
<td>搜索</td>
<td>search</td>
</tr>
<tr>
<td>登陆</td>
<td>login</td>
</tr>
<tr>
<td>功能区</td>
<td>shop</td>
</tr>
<tr>
<td>登陆条</td>
<td>loginbar</td>
</tr>
<tr>
<td>标题</td>
<td>title</td>
</tr>
</tbody></table>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/01/CSS基础知识点-CSS样式命名/" data-id="ck4r400na000al0w02k0fsrgx" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点-选择器" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/31/CSS基础知识点-选择器/" class="article-date">
  <time datetime="2019-07-31T10:32:51.000Z" itemprop="datePublished">2019-07-31</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/31/CSS基础知识点-选择器/">CSS基础知识点--选择器</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="种类"><a href="#种类" class="headerlink" title="种类"></a>种类</h2><ul>
<li><p>标签选择器</p>
</li>
<li><p>类选择器</p>
</li>
<li><p>ID选择器</p>
</li>
<li><p>全局选择器</p>
</li>
<li><p>群组选择器</p>
</li>
<li><p>后代选择器</p>
</li>
</ul>
<h2 id="伪类选择器"><a href="#伪类选择器" class="headerlink" title="伪类选择器"></a>伪类选择器</h2><ul>
<li><p>伪类选择器定义特殊状态下的样式</p>
</li>
<li><p>无法用标签、id、class及其他属性实现</p>
</li>
</ul>
<h3 id="链接伪类"><a href="#链接伪类" class="headerlink" title="链接伪类"></a>链接伪类</h3><p>链接的4种状态：激活状态，已访问状态，未访问状态和鼠标悬停状态</p>
<table>
<thead>
<tr>
<th>伪类</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>:link</td>
<td>未访问的链接</td>
</tr>
<tr>
<td>:visited</td>
<td>已访问的链接</td>
</tr>
<tr>
<td>:hover</td>
<td>鼠标悬停状态</td>
</tr>
<tr>
<td>:active</td>
<td>激活的链接</td>
</tr>
</tbody></table>
<h4 id="链接伪类的顺序"><a href="#链接伪类的顺序" class="headerlink" title="链接伪类的顺序"></a>链接伪类的顺序</h4><p>:link &gt; :visited &gt; :hover &gt; :active</p>
<p>说明：</p>
<ol>
<li><p>a:hover必须置于a:link和a:visited之后，才有效</p>
</li>
<li><p>a:active必须置于a:hover之后，才有效</p>
</li>
<li><p>伪类名称对大小写不敏感</p>
</li>
</ol>
<h3 id="伪类-hover和-active"><a href="#伪类-hover和-active" class="headerlink" title="伪类:hover和:active"></a>伪类:hover和:active</h3><ol>
<li><p>:hover用于访问的鼠标经过某个元素时</p>
</li>
<li><p>:active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）</p>
</li>
</ol>
<h4 id="伪类-hover和-active兼容"><a href="#伪类-hover和-active兼容" class="headerlink" title="伪类:hover和:active兼容"></a>伪类:hover和:active兼容</h4><ul>
<li><p>IE6及更早版本，支持<code>&lt;a&gt;</code>元素的4种状态</p>
</li>
<li><p>IE6浏览器不支持元素的:hover和:active</p>
</li>
</ul>
<h2 id="CSS层叠"><a href="#CSS层叠" class="headerlink" title="CSS层叠"></a>CSS层叠</h2><ul>
<li><p>可以定义多个样式</p>
</li>
<li><p>不冲突时，多个样式课层叠为一个</p>
</li>
<li><p>冲突时，按不同样式规则优先级来应用样式</p>
</li>
</ul>
<h2 id="CSS选择器优先级"><a href="#CSS选择器优先级" class="headerlink" title="CSS选择器优先级"></a>CSS选择器优先级</h2><p>id选择器 &gt; class选择器 &gt; 标签选择器 &gt; 通配符</p>
<p>同一元素使用相同类型的选择器定义相同类型样式，优先级按就近原则</p>
<h2 id="CSS优先级规则"><a href="#CSS优先级规则" class="headerlink" title="CSS优先级规则"></a>CSS优先级规则</h2><p>同一样式表中：</p>
<ol>
<li>权值相同</li>
</ol>
<ul>
<li>就近原则（离被设置元素越近优先级越高）</li>
</ul>
<ol start="2">
<li>权值不同</li>
</ol>
<ul>
<li><p>根据权值来判断CSS样式</p>
</li>
<li><p>哪种CSS样式权值越高，就使用哪种样式</p>
</li>
</ul>
<h2 id="选择器权值"><a href="#选择器权值" class="headerlink" title="选择器权值"></a>选择器权值</h2><table>
<thead>
<tr>
<th>选择器</th>
<th>权值</th>
</tr>
</thead>
<tbody><tr>
<td>标签选择器</td>
<td>1</td>
</tr>
<tr>
<td>类选择器</td>
<td>10</td>
</tr>
<tr>
<td>伪类</td>
<td>10</td>
</tr>
<tr>
<td>ID选择器</td>
<td>100</td>
</tr>
<tr>
<td>通配符选择器</td>
<td>0</td>
</tr>
<tr>
<td>行内样式</td>
<td>1000</td>
</tr>
</tbody></table>
<h3 id="权值规则"><a href="#权值规则" class="headerlink" title="权值规则"></a>权值规则</h3><ol>
<li><p>统计不同选择器的个数</p>
</li>
<li><p>每类选择器的个数乘以相应权值</p>
</li>
<li><p>把所有的值相加得出选择器的权值</p>
</li>
</ol>
<h3 id="important规则"><a href="#important规则" class="headerlink" title="!important规则"></a>!important规则</h3><ul>
<li><p>可调整样式规则的优先级，使其权值最高</p>
</li>
<li><p>添加在样式规则之后，中间用空格隔开</p>
</li>
</ul>
<h2 id="CSS样式命名规则"><a href="#CSS样式命名规则" class="headerlink" title="CSS样式命名规则"></a>CSS样式命名规则</h2><ul>
<li><p>采用英文字母、数字以及”-“和”_”命名</p>
</li>
<li><p>以小写字母开头，不能以数字和”-“、”_”开头</p>
</li>
<li><p>命名形式：单字，连字符，下划线和驼峰</p>
</li>
<li><p>使用有意义命名</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/31/CSS基础知识点-选择器/" data-id="ck4r400nh000ml0w01aahq42v" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS基础知识点" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/30/CSS基础知识点/" class="article-date">
  <time datetime="2019-07-30T13:29:26.000Z" itemprop="datePublished">2019-07-30</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/30/CSS基础知识点/">CSS基础知识点</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="HTML、CSS、JavaScript关系"><a href="#HTML、CSS、JavaScript关系" class="headerlink" title="HTML、CSS、JavaScript关系"></a>HTML、CSS、JavaScript关系</h2><ul>
<li><p>HTML是网页内容的载体</p>
</li>
<li><p>CSS样式是表现（外观控制）</p>
</li>
<li><p>JavaScript是行为，用来实现网页特效效果</p>
</li>
</ul>
<h2 id="CSS导入式"><a href="#CSS导入式" class="headerlink" title="CSS导入式"></a>CSS导入式</h2><ul>
<li><p>@import “外部CSS样式”</p>
</li>
<li><p>@import url(外部CSS样式)</p>
</li>
</ul>
<h2 id="CSS使用方法区别"><a href="#CSS使用方法区别" class="headerlink" title="CSS使用方法区别"></a>CSS使用方法区别</h2><table>
<thead>
<tr>
<th>类别</th>
<th>引入方法</th>
<th>位置</th>
<th>加载</th>
</tr>
</thead>
<tbody><tr>
<td>行内样式</td>
<td>开始标签内的style</td>
<td>html文件内</td>
<td>同时</td>
</tr>
<tr>
<td>内部样式</td>
<td><code>&lt;head&gt;</code>中<code>&lt;style&gt;</code>内</td>
<td>html文件内</td>
<td>同时</td>
</tr>
<tr>
<td>链入外部样式</td>
<td><code>&lt;head&gt;</code>中<code>&lt;link&gt;</code>引用</td>
<td>CSS样式文件与html文件分离</td>
<td>页面加载时，同时加载CSS样式</td>
</tr>
<tr>
<td>导入式@import</td>
<td>在样式代码最开始处</td>
<td>CSS样式文件与html文件分离</td>
<td>在读取完html文件之后加载</td>
</tr>
</tbody></table>
<h3 id="使用链入外部样式的好处"><a href="#使用链入外部样式的好处" class="headerlink" title="使用链入外部样式的好处"></a>使用链入外部样式的好处</h3><ol>
<li><p>CSS和HTML分离</p>
</li>
<li><p>多个文件可以使用同一个样式文件</p>
</li>
<li><p>多文件引用同一个CSS文件，CSS只需下载一次</p>
</li>
</ol>
<h3 id="CSS使用方法优先级"><a href="#CSS使用方法优先级" class="headerlink" title="CSS使用方法优先级"></a>CSS使用方法优先级</h3><blockquote>
<p>行内样式&gt;内部样式&gt;外部样式</p>
</blockquote>
<p>说明：</p>
<ol>
<li><p>链入外部样式表与内部样式表之间的优先级取决于所处位置的先后</p>
</li>
<li><p>根据样式与元素的距离而定，越接近优先级就越高（就近原则）</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/30/CSS基础知识点/" data-id="ck4r400np000wl0w07xxcn0a0" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-HTML基础知识点-div和span与块级和行内标签" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/29/HTML基础知识点-div和span与块级和行内标签/" class="article-date">
  <time datetime="2019-07-29T13:39:52.000Z" itemprop="datePublished">2019-07-29</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML/">HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/29/HTML基础知识点-div和span与块级和行内标签/">HTML基础知识点--div和span与块级和行内标签</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="lt-div-gt-和-lt-span-gt"><a href="#lt-div-gt-和-lt-span-gt" class="headerlink" title="&lt;div&gt;和&lt;span&gt;"></a><code>&lt;div&gt;</code>和<code>&lt;span&gt;</code></h2><ul>
<li><code>&lt;div&gt;</code>标签</li>
</ul>
<blockquote>
<p>是一个区块容器标记，<code>&lt;div&gt;&lt;/div&gt;</code>之间是一个容器，可以包含段落、表格、图片等各种HTML元素。</p>
</blockquote>
<ul>
<li><code>&lt;span&gt;</code>标签</li>
</ul>
<blockquote>
<p>没有任何意义，为了应用样式</p>
</blockquote>
<h2 id="块级标签和行内标签"><a href="#块级标签和行内标签" class="headerlink" title="块级标签和行内标签"></a>块级标签和行内标签</h2><ul>
<li><p>块级标签：占据一行，换行</p>
</li>
<li><p>行内标签：在一行，不换行</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/29/HTML基础知识点-div和span与块级和行内标签/" data-id="ck4r400pg003sl0w0n1tlgmge" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML/">HTML</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-HTML基础知识点-表单" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/25/HTML基础知识点-表单/" class="article-date">
  <time datetime="2019-07-25T05:23:35.000Z" itemprop="datePublished">2019-07-25</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML/">HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/25/HTML基础知识点-表单/">HTML基础知识点-表单</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<p>Form标签中，以下标签实现表单元素的添加</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>&lt;input&gt;</code></td>
<td>表单输入标签</td>
</tr>
<tr>
<td><code>&lt;select&gt;</code></td>
<td>菜单和列表标签</td>
</tr>
<tr>
<td><code>&lt;option&gt;</code></td>
<td>菜单和列表项目标签</td>
</tr>
<tr>
<td><code>&lt;textarea&gt;</code></td>
<td>文字域标签</td>
</tr>
<tr>
<td><code>&lt;optgroup&gt;</code></td>
<td>菜单和列表项目分组标签</td>
</tr>
</tbody></table>
<h2 id="lt-form-gt-标签属性"><a href="#lt-form-gt-标签属性" class="headerlink" title="&lt;form&gt;标签属性"></a><code>&lt;form&gt;</code>标签属性</h2><table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>action</td>
<td>URL</td>
<td>提交表单时向何处发送表单数据</td>
</tr>
<tr>
<td>method</td>
<td>get，post</td>
<td>设置表单以何种方式发送到指定页面</td>
</tr>
<tr>
<td>name</td>
<td>form_name</td>
<td>表单的名称</td>
</tr>
<tr>
<td>target</td>
<td>_blank,_self,_parent,_top</td>
<td>在何处打开action URL</td>
</tr>
<tr>
<td>enctype</td>
<td>application/x-www-form-urlencoded, multiple/form-data, text/plain</td>
<td>在发送表单数据之前如何对其编码</td>
</tr>
</tbody></table>
<h2 id="input标签属性"><a href="#input标签属性" class="headerlink" title="input标签属性"></a>input标签属性</h2><table>
<thead>
<tr>
<th>Type属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>text</td>
<td>文字域</td>
</tr>
<tr>
<td>password</td>
<td>密码域</td>
</tr>
<tr>
<td>file</td>
<td>文件域</td>
</tr>
<tr>
<td>checkbox</td>
<td>复选域</td>
</tr>
<tr>
<td>radio</td>
<td>单选域</td>
</tr>
<tr>
<td>Button</td>
<td>按钮</td>
</tr>
<tr>
<td>Submit</td>
<td>提交按钮</td>
</tr>
<tr>
<td>Reset</td>
<td>重置按钮</td>
</tr>
<tr>
<td>Hidden</td>
<td>隐藏域</td>
</tr>
<tr>
<td>image</td>
<td>图像域</td>
</tr>
</tbody></table>
<h3 id="单选框和复选框"><a href="#单选框和复选框" class="headerlink" title="单选框和复选框"></a>单选框和复选框</h3><p>注：name值必须一致</p>
<h3 id="image"><a href="#image" class="headerlink" title="image"></a>image</h3><p>图像域既有图像，也能实现提交功能</p>
<h2 id="下拉菜单和列表标签"><a href="#下拉菜单和列表标签" class="headerlink" title="下拉菜单和列表标签"></a>下拉菜单和列表标签</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;select&gt;</span><br><span class="line">    &lt;option value=&quot;&quot;&gt;选项&lt;/option&gt;</span><br><span class="line">    &lt;option value=&quot;&quot;&gt;选项&lt;/option&gt;</span><br><span class="line">&lt;/select&gt;</span><br></pre></td></tr></table></figure>

<h3 id="select标签属性"><a href="#select标签属性" class="headerlink" title="select标签属性"></a>select标签属性</h3><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>name</td>
<td>设置下拉菜单和列表的名称</td>
</tr>
<tr>
<td>multiple</td>
<td>设置可选择多个选项</td>
</tr>
<tr>
<td>size</td>
<td>设置列表中可见选项的数目</td>
</tr>
</tbody></table>
<h3 id="option标签属性"><a href="#option标签属性" class="headerlink" title="option标签属性"></a>option标签属性</h3><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>selected</td>
<td>设置选项初始选中状态</td>
</tr>
<tr>
<td>value</td>
<td>定义送往服务器的选项值</td>
</tr>
</tbody></table>
<h2 id="分组下拉菜单和列表"><a href="#分组下拉菜单和列表" class="headerlink" title="分组下拉菜单和列表"></a>分组下拉菜单和列表</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;select&gt;</span><br><span class="line">    &lt;optgroup label=&quot;组1&quot;&gt;</span><br><span class="line">    &lt;option value=&quot;&quot;&gt;选项&lt;/option&gt;</span><br><span class="line">    &lt;option value=&quot;&quot;&gt;选项&lt;/option&gt;</span><br><span class="line">    ...</span><br><span class="line">    &lt;optgroup label=&quot;组2&quot;&gt;</span><br><span class="line">    &lt;option value=&quot;&quot;&gt;选项&lt;/option&gt;</span><br><span class="line">    &lt;option value=&quot;&quot;&gt;选项&lt;/option&gt;</span><br><span class="line">    ...</span><br><span class="line">&lt;/select&gt;</span><br></pre></td></tr></table></figure>

<h2 id="多行文本域-lt-textarea-gt"><a href="#多行文本域-lt-textarea-gt" class="headerlink" title="多行文本域&lt;textarea&gt;"></a>多行文本域<code>&lt;textarea&gt;</code></h2><h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;textarea name=&quot;&quot; rows=&quot;&quot; cols=&quot;&quot;&gt;</span><br><span class="line">    内容...</span><br><span class="line">&lt;/textarea&gt;</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>name</td>
<td>设置文本区的名称</td>
</tr>
<tr>
<td>placeholder</td>
<td>设置描述文本区域预期值的简短提示</td>
</tr>
<tr>
<td>rows</td>
<td>设置文本区内的可见行数</td>
</tr>
<tr>
<td>cols</td>
<td>设置文本区内的可见宽度</td>
</tr>
</tbody></table>
<h2 id="post和get的区别"><a href="#post和get的区别" class="headerlink" title="post和get的区别"></a>post和get的区别</h2><p>GET：</p>
<ul>
<li><p>使用URL传递参数</p>
</li>
<li><p>对所发送信息的数量也有限制</p>
</li>
<li><p>一般用于信息获取</p>
</li>
<li><p>保密性差</p>
</li>
</ul>
<p>POST：</p>
<ul>
<li><p>表单数据作为HTTP请求体的一部分</p>
</li>
<li><p>对所发送信息的数量无限制</p>
</li>
<li><p>一般用于修改服务器上的资源</p>
</li>
<li><p>保密性好</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/25/HTML基础知识点-表单/" data-id="ck4r400po0044l0w0czogbyin" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML/">HTML</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-HTML基础知识点-表格" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/24/HTML基础知识点-表格/" class="article-date">
  <time datetime="2019-07-24T05:20:50.000Z" itemprop="datePublished">2019-07-24</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML/">HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/24/HTML基础知识点-表格/">HTML基础知识点-表格</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="知识点"><a href="#知识点" class="headerlink" title="知识点"></a>知识点</h2><ul>
<li><p><code>&lt;table&gt;</code>：表格</p>
</li>
<li><p><code>&lt;tr&gt;</code>：行</p>
</li>
<li><p><code>&lt;td&gt;</code>：单元格</p>
</li>
</ul>
<h2 id="带结构的表格"><a href="#带结构的表格" class="headerlink" title="带结构的表格"></a>带结构的表格</h2><p>表格划分三部分：表头，主体，脚注</p>
<p>加载时可以逐个结构加载</p>
<ul>
<li><p>thead：表格的头（放表格的表头）</p>
</li>
<li><p>tbody：表格的主体（放数据本体）</p>
</li>
<li><p>tfoot：表格的脚（放表格的脚注）</p>
</li>
</ul>
<p>无论这三个标签的位置如何变化，总是先显示<code>&lt;thead&gt;</code>，然后才是<code>&lt;tbody&gt;</code>，最后是<code>&lt;tfoot&gt;</code></p>
<p>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;table&gt;                                 //表格开始</span><br><span class="line">    &lt;caption&gt;...&lt;/caption&gt;              //表格标题</span><br><span class="line">    &lt;thead&gt;</span><br><span class="line">        &lt;tr&gt;                            //tr行标签</span><br><span class="line">            &lt;th&gt;表头&lt;/th&gt;               //表格头，内容居中，加粗显示</span><br><span class="line">            ...</span><br><span class="line">        &lt;/tr&gt;</span><br><span class="line">    &lt;/thead&gt; </span><br><span class="line">    &lt;tbody&gt;</span><br><span class="line">        &lt;tr&gt;</span><br><span class="line">            &lt;td&gt;主体&lt;/td&gt;               //td单元格，默认</span><br><span class="line">            ...</span><br><span class="line">        &lt;/tr&gt;</span><br><span class="line">    &lt;/tbody&gt;</span><br><span class="line">    &lt;tfoot&gt;</span><br><span class="line">        &lt;tr&gt;</span><br><span class="line">            &lt;td&gt;脚注&lt;/td&gt;                        </span><br><span class="line">            ...</span><br><span class="line">        &lt;/tr&gt;</span><br><span class="line">    &lt;/tfoot&gt;</span><br><span class="line">&lt;/table&gt;                               //表格结束</span><br></pre></td></tr></table></figure>

<h3 id="table标签特殊属性"><a href="#table标签特殊属性" class="headerlink" title="table标签特殊属性"></a>table标签特殊属性</h3><ul>
<li><p>cellspacing：单元格之间间距</p>
</li>
<li><p>cellpadding：单元格内内容和单元格边框的距离</p>
</li>
<li><p>frame：外部边框的显示</p>
</li>
<li><p>rules：内部标签的显示</p>
</li>
</ul>
<h3 id="tr标签特殊属性"><a href="#tr标签特殊属性" class="headerlink" title="tr标签特殊属性"></a>tr标签特殊属性</h3><table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>align</td>
<td>Left/center/right/justiy/char</td>
<td>行内容的水平对齐</td>
</tr>
<tr>
<td>Valign</td>
<td>top/middle/bottom/baseline</td>
<td>行内容的垂直对齐</td>
</tr>
<tr>
<td>Bgcolor</td>
<td>rgb/#xxxxxx/colorname</td>
<td>行的背景颜色</td>
</tr>
</tbody></table>
<p><code>&lt;td&gt;</code>和<code>&lt;th&gt;</code>常用标签属性类似与<code>&lt;tr&gt;</code></p>
<h2 id="表格布局"><a href="#表格布局" class="headerlink" title="表格布局"></a>表格布局</h2><ul>
<li><p>尽量少的使用表格嵌套</p>
</li>
<li><p>尽量少的使用表格跨行跨列</p>
</li>
</ul>
<p>说明：减少代码维护成本，使用表格进行网页布局一般不设置border</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/24/HTML基础知识点-表格/" data-id="ck4r400pn0042l0w04eae7iw2" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML/">HTML</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-HTML基础知识点-图像与超链接" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/23/HTML基础知识点-图像与超链接/" class="article-date">
  <time datetime="2019-07-23T07:39:48.000Z" itemprop="datePublished">2019-07-23</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML/">HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/23/HTML基础知识点-图像与超链接/">HTML基础知识点-图像与超链接</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="图像标签"><a href="#图像标签" class="headerlink" title="图像标签"></a>图像标签</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><p><code>&lt;img src=&quot;&quot; alt=&quot;&quot;/&gt;</code></p>
<h3 id="img属性"><a href="#img属性" class="headerlink" title="img属性"></a>img属性</h3><table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>Src（必写）</td>
<td>URL</td>
<td>显示图像的URL</td>
</tr>
<tr>
<td>alt</td>
<td>文字</td>
<td>图像替代文本</td>
</tr>
<tr>
<td>height</td>
<td>数值和百分比</td>
<td>图像的高</td>
</tr>
<tr>
<td>width</td>
<td>数值和百分比</td>
<td>图像的宽</td>
</tr>
</tbody></table>
<h4 id="alt属性作用"><a href="#alt属性作用" class="headerlink" title="alt属性作用"></a>alt属性作用</h4><p>当由于：</p>
<ul>
<li><p>网速太慢</p>
</li>
<li><p>src属性中的错误</p>
</li>
<li><p>浏览器禁用图像</p>
</li>
</ul>
<p>用户无法查看图像时，alt属性可以代替图像显示在浏览器中的内容</p>
<h2 id="超链接标签"><a href="#超链接标签" class="headerlink" title="超链接标签"></a>超链接标签</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><p><code>&lt;a href=&quot;&quot;&gt;内容&lt;/a&gt;</code></p>
<p><strong>href</strong>：链接地址，可以是内部链接或外部链接</p>
<p>当链接为空时，点击链接会刷新页面</p>
<h3 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h3><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>href</td>
<td>链接地址</td>
</tr>
<tr>
<td>target</td>
<td>链接的目标窗口（_self、_blank、_top、_parent）</td>
</tr>
<tr>
<td>title</td>
<td>链接提示文字（当光标停在链接上时，提示文字将会出现）</td>
</tr>
<tr>
<td>name</td>
<td>链接命名</td>
</tr>
</tbody></table>
<h2 id="锚链接"><a href="#锚链接" class="headerlink" title="锚链接"></a>锚链接</h2><h3 id="定义锚（同一页面）"><a href="#定义锚（同一页面）" class="headerlink" title="定义锚（同一页面）"></a>定义锚（同一页面）</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=&quot;#锚名&quot;&gt;目录1&lt;/a&gt;</span><br><span class="line">&lt;a href=&quot;...&quot; name=&quot;锚名&quot;&gt;内容&lt;/a&gt;</span><br><span class="line">    xxxxx</span><br><span class="line">    xxxxxxxxxx</span><br></pre></td></tr></table></figure>

<h3 id="定义锚（不同页面）"><a href="#定义锚（不同页面）" class="headerlink" title="定义锚（不同页面）"></a>定义锚（不同页面）</h3><p>不同页面的锚链接：不仅可以跳转别的链接，而且还能找到相应的锚点位置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">网页1：&lt;a href=&quot;网页名称#锚名&gt;...&lt;/a&gt;</span><br><span class="line">网页2：&lt;a href=&quot;锚名&gt;...&lt;/a&gt;</span><br></pre></td></tr></table></figure>

<h2 id="电子邮件链接"><a href="#电子邮件链接" class="headerlink" title="电子邮件链接"></a>电子邮件链接</h2><h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=&quot;mailto:邮件地址&quot;&gt;...&lt;/a&gt;</span><br></pre></td></tr></table></figure>

<h2 id="文件下载"><a href="#文件下载" class="headerlink" title="文件下载"></a>文件下载</h2><h3 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=&quot;下载文件的地址&quot; download=&quot;下载文件的地址&quot;&gt;...&lt;/a&gt;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/23/HTML基础知识点-图像与超链接/" data-id="ck4r400pi003wl0w04op9nd02" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML/">HTML</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-HTML基础" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/21/HTML基础/" class="article-date">
  <time datetime="2019-07-21T13:58:01.000Z" itemprop="datePublished">2019-07-21</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML/">HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/21/HTML基础/">HTML基础知识点</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="常用标签"><a href="#常用标签" class="headerlink" title="常用标签"></a>常用标签</h2><ol>
<li><p>换行：<code>&lt;br/&gt;</code></p>
</li>
<li><p>HTML编写格式排版网页：<code>&lt;pre&gt;&lt;/pre&gt;</code></p>
</li>
<li><p>线：<code>&lt;/hr&gt;</code></p>
</li>
<li><p>斜体：<code>&lt;i&gt;</code>,<code>&lt;em&gt;</code></p>
</li>
<li><p>粗体：<code>&lt;b&gt;</code>,<code>&lt;strong&gt;</code></p>
</li>
<li><p>上标：<code>&lt;sup&gt;</code></p>
</li>
<li><p>下标：<code>&lt;sub&gt;</code></p>
</li>
<li><p>定义列表：<code>&lt;dl&gt;</code></p>
</li>
<li><p>定义列表项：<code>&lt;dt&gt;</code></p>
</li>
<li><p>列表项描述：<code>&lt;dd&gt;</code></p>
</li>
</ol>
<h2 id="常用属性"><a href="#常用属性" class="headerlink" title="常用属性"></a>常用属性</h2><ol>
<li>align（对齐）</li>
</ol>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>left</td>
<td>左对齐内容</td>
</tr>
<tr>
<td>right</td>
<td>右对齐内容</td>
</tr>
<tr>
<td>center</td>
<td>居中对齐内容</td>
</tr>
<tr>
<td>justify</td>
<td>对行进行伸展，这样每行都可以有相等的长度</td>
</tr>
</tbody></table>
<h2 id="其他知识点"><a href="#其他知识点" class="headerlink" title="其他知识点"></a>其他知识点</h2><h3 id="无序列表符号"><a href="#无序列表符号" class="headerlink" title="无序列表符号"></a>无序列表符号</h3><p><code>&lt;ul&gt;</code>的type属性值</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>disc</td>
<td>圆点</td>
</tr>
<tr>
<td>square</td>
<td>正方形</td>
</tr>
<tr>
<td>circle</td>
<td>空心圆</td>
</tr>
</tbody></table>
<h3 id="有序列表符号"><a href="#有序列表符号" class="headerlink" title="有序列表符号"></a>有序列表符号</h3><p><code>&lt;ol&gt;</code>的type属性</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>数字1,2…</td>
</tr>
<tr>
<td>a</td>
<td>小写字母a,b…</td>
</tr>
<tr>
<td>A</td>
<td>大写字母A,B…</td>
</tr>
<tr>
<td>i</td>
<td>小写罗马数字i</td>
</tr>
<tr>
<td>I</td>
<td>大写罗马数字I</td>
</tr>
</tbody></table>
<h3 id="特殊符号"><a href="#特殊符号" class="headerlink" title="特殊符号"></a>特殊符号</h3><table>
<thead>
<tr>
<th>属性</th>
<th>显示结果</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>&amp;lt;</code></td>
<td>&lt;</td>
<td>小于号或显示标记</td>
</tr>
<tr>
<td><code>&amp;gt;</code></td>
<td>&gt;</td>
<td>大于号或显示标记</td>
</tr>
<tr>
<td><code>&amp;reg;</code></td>
<td>&reg;</td>
<td>已注册</td>
</tr>
<tr>
<td><code>&amp;copy;</code></td>
<td>&copy;</td>
<td>版权</td>
</tr>
<tr>
<td><code>&amp;trade;</code></td>
<td>&trade;</td>
<td>商标</td>
</tr>
<tr>
<td><code>&amp;nbsp;</code></td>
<td>Space</td>
<td>不断行的空格</td>
</tr>
</tbody></table>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/21/HTML基础/" data-id="ck4r400pk003yl0w0uv9hmwon" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML/">HTML</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Java知识点-2" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/20/Java知识点-2/" class="article-date">
  <time datetime="2019-07-20T09:56:26.000Z" itemprop="datePublished">2019-07-20</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Java/">Java</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/20/Java知识点-2/">Java知识点-week2（枚举，继承）</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="枚举类"><a href="#枚举类" class="headerlink" title="枚举类"></a>枚举类</h2><p>将普通的Java类的calss替换为enum，创建属性值时不需要添加<code>;</code></p>
<p>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">public enum Animal &#123;</span><br><span class="line">    tiger,</span><br><span class="line">    lion,</span><br><span class="line">    dog,</span><br><span class="line">    cat</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">public class Apple extends Fruit&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>父类转换成子类，需要强制转换。</p>
<p>子类转换成父类，直接<code>=</code>符号赋值。</p>
<h2 id="文件读写"><a href="#文件读写" class="headerlink" title="文件读写"></a>文件读写</h2><h3 id="文件读取"><a href="#文件读取" class="headerlink" title="文件读取"></a>文件读取</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">public static void read()&#123;</span><br><span class="line">    File file = new File(&quot;E:\\临时.txt&quot;);</span><br><span class="line">    BufferedReader br = null;</span><br><span class="line">    try &#123;</span><br><span class="line">        br = new BufferedReader(new FileReader(file));</span><br><span class="line">        String line;</span><br><span class="line">        while ((line = br.readLine()) != null)&#123;</span><br><span class="line">            System.out.println(line);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; catch (IOException e) &#123;</span><br><span class="line">        e.printStackTrace();</span><br><span class="line">    &#125; finally &#123;</span><br><span class="line">        if( br != null)&#123;</span><br><span class="line">            try &#123;</span><br><span class="line">                br.close();</span><br><span class="line">            &#125; catch (IOException e) &#123;</span><br><span class="line">                e.printStackTrace();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>BufferedReader是比FileReader更为简洁的代码编写，主要体现在缓存区中，BufferedReader读取时将字符串一行一行的读取。</p>
<h3 id="文件写入"><a href="#文件写入" class="headerlink" title="文件写入"></a>文件写入</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">public static void write()&#123;</span><br><span class="line">    File file = new File(&quot;E:\\临时.txt&quot;);</span><br><span class="line">    BufferedWriter bw = null;</span><br><span class="line">    try &#123;</span><br><span class="line">        bw = new BufferedWriter(new FileWriter(file));</span><br><span class="line">        bw.write(&quot;hello bmatch&quot;);</span><br><span class="line">    &#125; catch (IOException e) &#123;</span><br><span class="line">        e.printStackTrace();</span><br><span class="line">    &#125; finally &#123;</span><br><span class="line">        if(bw != null)&#123;</span><br><span class="line">            try &#123;</span><br><span class="line">                bw.close();</span><br><span class="line">            &#125; catch (IOException e) &#123;</span><br><span class="line">                e.printStackTrace();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Excel文件读写"><a href="#Excel文件读写" class="headerlink" title="Excel文件读写"></a>Excel文件读写</h2><h3 id="Excel文件读取"><a href="#Excel文件读取" class="headerlink" title="Excel文件读取"></a>Excel文件读取</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">public static void read()&#123;</span><br><span class="line">    InputStream inputStream = null;</span><br><span class="line">    try &#123;</span><br><span class="line">        inputStream = new FileInputStream(&quot;E:\\test\\workbook.xlsx&quot;);</span><br><span class="line">        Workbook wb = WorkbookFactory.create(inputStream);</span><br><span class="line">        DataFormatter formatter = new DataFormatter();</span><br><span class="line">        Sheet sheet1 = wb.getSheetAt(0);</span><br><span class="line">        for (Row row : sheet1) &#123;</span><br><span class="line">            for (Cell cell : row) &#123;</span><br><span class="line">                CellReference cellRef = new CellReference(row.getRowNum(), cell.getColumnIndex());</span><br><span class="line">                System.out.print(cellRef.formatAsString());</span><br><span class="line">                System.out.print(&quot; - &quot;);</span><br><span class="line"></span><br><span class="line">                // get the text that appears in the cell by getting the cell value and applying any data formats (Date, 0.00, 1.23e9, $1.23, etc)</span><br><span class="line">                String text = formatter.formatCellValue(cell);</span><br><span class="line">                System.out.println(text);</span><br><span class="line"></span><br><span class="line">                // Alternatively, get the value and format it yourself</span><br><span class="line">                switch (cell.getCellType()) &#123;</span><br><span class="line">                    case STRING:</span><br><span class="line">                        System.out.println(cell.getRichStringCellValue().getString());</span><br><span class="line">                        break;</span><br><span class="line">                    case NUMERIC:</span><br><span class="line">                        if (DateUtil.isCellDateFormatted(cell)) &#123;</span><br><span class="line">                            System.out.println(cell.getDateCellValue());</span><br><span class="line">                        &#125; else &#123;</span><br><span class="line">                            System.out.println(cell.getNumericCellValue());</span><br><span class="line">                        &#125;</span><br><span class="line">                        break;</span><br><span class="line">                    case BOOLEAN:</span><br><span class="line">                        System.out.println(cell.getBooleanCellValue());</span><br><span class="line">                        break;</span><br><span class="line">                    case FORMULA:</span><br><span class="line">                        System.out.println(cell.getCellFormula());</span><br><span class="line">                        break;</span><br><span class="line">                    case BLANK:</span><br><span class="line">                        System.out.println();</span><br><span class="line">                        break;</span><br><span class="line">                    default:</span><br><span class="line">                        System.out.println();</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125; catch (IOException e) &#123;</span><br><span class="line">        e.printStackTrace();</span><br><span class="line">    &#125; finally &#123;</span><br><span class="line">        if(inputStream != null)&#123;</span><br><span class="line">            try &#123;</span><br><span class="line">                inputStream.close();</span><br><span class="line">            &#125; catch (IOException e) &#123;</span><br><span class="line">                e.printStackTrace();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="Excel文件写入"><a href="#Excel文件写入" class="headerlink" title="Excel文件写入"></a>Excel文件写入</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">public static void write()&#123;</span><br><span class="line">    Workbook wb = null;</span><br><span class="line">    OutputStream fileOut = null;</span><br><span class="line">    try &#123;</span><br><span class="line">        fileOut = new FileOutputStream(&quot;E:\\test\\workbook.xlsx&quot;);</span><br><span class="line">        wb = new XSSFWorkbook();</span><br><span class="line">        Sheet sheet = wb.createSheet(&quot;new sheet&quot;);</span><br><span class="line">        Row row = sheet.createRow(0);</span><br><span class="line">        Cell cell0 = row.createCell(0);</span><br><span class="line">        cell0.setCellValue(1.0);</span><br><span class="line"></span><br><span class="line">        Cell cell1 = row.createCell(1);</span><br><span class="line">        cell1.setCellValue(&quot;hello bmatch&quot;);</span><br><span class="line"></span><br><span class="line">        CreationHelper createHelper = wb.getCreationHelper();</span><br><span class="line">        CellStyle cellStyle = wb.createCellStyle();</span><br><span class="line">        cellStyle.setDataFormat(</span><br><span class="line">                createHelper.createDataFormat().getFormat(&quot;m/d/yy h:mm&quot;));</span><br><span class="line"></span><br><span class="line">        Cell cell2 = row.createCell(2);</span><br><span class="line">        cell2.setCellValue(new Date());</span><br><span class="line">        cell2.setCellStyle(cellStyle);</span><br><span class="line">        wb.write(fileOut);</span><br><span class="line">    &#125;  catch (IOException e) &#123;</span><br><span class="line">        e.printStackTrace();</span><br><span class="line">    &#125; finally &#123;</span><br><span class="line">        if (fileOut != null) &#123;</span><br><span class="line">            try &#123;</span><br><span class="line">                fileOut.close();</span><br><span class="line">            &#125; catch (IOException e) &#123;</span><br><span class="line">                e.printStackTrace();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/20/Java知识点-2/" data-id="ck4r400rg007ll0w0ufekx99y" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Java/">Java</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Java知识点-1" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/16/Java知识点-1/" class="article-date">
  <time datetime="2019-07-16T09:21:39.000Z" itemprop="datePublished">2019-07-16</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Java/">Java</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/16/Java知识点-1/">Java知识点--week1（基本方法，注解，ArrayList，数据过滤，Integer类，Date）</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="Java基本方法概况"><a href="#Java基本方法概况" class="headerlink" title="Java基本方法概况"></a>Java基本方法概况</h2><ul>
<li><p>System.out.println(“string”);</p>
<p>  控制台打印信息</p>
</li>
<li><p>concat方法：拼接字符串</p>
<p>  string1.concat(string2)</p>
</li>
<li><p><code>+</code>拼接字符串</p>
</li>
<li><p>string.length()：查看字符串长度</p>
</li>
<li><p>string1.equals(string2)：返回值为布尔类型</p>
</li>
</ul>
<h3 id="常量"><a href="#常量" class="headerlink" title="常量"></a><font color="red">常量</font></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">//快捷：const</span><br><span class="line">private static final String ConStant = &quot;常量&quot;;</span><br></pre></td></tr></table></figure>

<h2 id="注解"><a href="#注解" class="headerlink" title="注解"></a>注解</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">@RestController</span><br><span class="line">public class AccountingController &#123;</span><br><span class="line">    @RequestMapping(path = &quot;/accounting&quot;)</span><br><span class="line">    public String accounting(@RequestParam(&quot;cash&quot;) int cash,@RequestParam(&quot;income&quot;) int income,@RequestParam(&quot;rent&quot;) int rent,@RequestParam(&quot;charges&quot;) int charges,</span><br><span class="line"></span><br><span class="line">    @RequestParam(&quot;eat&quot;) int eat)&#123;</span><br><span class="line">        int result = cash + income - rent - charges - eat;</span><br><span class="line">        String str = String.valueOf(result);</span><br><span class="line">        return str;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>@RestController = @Controller + @ResponseBody：</p>
<ol>
<li><p>@Controller 习惯于和@RequestMapping绑定来使用</p>
</li>
<li><p>@ResponseBody告诉控制器返回对象会被自动序列化成JSON，并且传回HttpResponse这个对象。相当于自动实现XMLHttpRequest</p>
</li>
</ol>
</li>
<li><p>@RequestMapping：为HTML的form表单提供地址</p>
</li>
<li><p>@RequestParam(“前端input的name”)：获取输入的值</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">public String search(@RequestParam(&quot;amount&quot;) int amount)&#123;</span><br><span class="line">    return null;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="ArrayList"><a href="#ArrayList" class="headerlink" title="ArrayList"></a>ArrayList</h2><ol>
<li><p>能够动态扩容的数组</p>
</li>
<li><p>按照放入的顺序存储数据，可以存放重复的对象</p>
</li>
</ol>
<h3 id="ArrayList——方法概况"><a href="#ArrayList——方法概况" class="headerlink" title="ArrayList——方法概况"></a>ArrayList——方法概况</h3><ol>
<li><p>add：增加数据</p>
</li>
<li><p>remove：删除数据</p>
</li>
<li><p>size：长度</p>
</li>
<li><p>isEmpty：是否为空</p>
</li>
<li><p>get：获取数组中的值，根据索引读取元素，比如可以获取第二个元素</p>
</li>
</ol>
<h3 id="ArrayList——遍历数组——foreach循环"><a href="#ArrayList——遍历数组——foreach循环" class="headerlink" title="ArrayList——遍历数组——foreach循环"></a>ArrayList——遍历数组——foreach循环</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">for (String item : List1)&#123;</span><br><span class="line">    //String item : List1等价于从数组的第一个开始，自动加一</span><br><span class="line">    System.out.println(&quot;ArrayList的元素是：&quot; + item);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Integer类"><a href="#Integer类" class="headerlink" title="Integer类"></a>Integer类</h2><p>Integer 类在对象中包装了一个基本类型int的值。Integer类型的对象包含一个 int 类型的字段。此外，该类提供了多个方法，能在 int 类型和 String 类型之间互相转换，同时还提供了其他一些处理int类型时非常有用的常量和方法。</p>
<h3 id="构造方法"><a href="#构造方法" class="headerlink" title="构造方法"></a>构造方法</h3><ol>
<li>Integer(int number)</li>
</ol>
<p>该方法以一个int型变量作为参数来获取Integer对象。<br>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Intrger number = new Integer(7);</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>Integer(String str)</li>
</ol>
<p>该方法以一个String型变量作为参数来获取Integer对象。<br>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Intrger number = new Integer(&quot;45&quot;);</span><br></pre></td></tr></table></figure>

<ul>
<li>要用数值型String变量作为参数，如123，否则将会抛出NumberFormatException异常。</li>
</ul>
<h3 id="常用方法"><a href="#常用方法" class="headerlink" title="常用方法"></a>常用方法</h3><p><img src="https://images2015.cnblogs.com/blog/1121163/201707/1121163-20170718205559349-30919243.jpg" alt></p>
<ul>
<li><p>parseInt()方法返回与调用该方法的数值字符串相应的整型(int)值</p>
</li>
<li><p>toString()方法，可将Integer对象转换为十进制字符串表示。toBinaryString()、toHexString()和toOctalString()方法分别将值转换成二进制、十六进制和八进制字符串。</p>
</li>
</ul>
<p>详情请见：<a href="https://www.cnblogs.com/cxf1404445126/p/7202483.html" target="_blank" rel="noopener">https://www.cnblogs.com/cxf1404445126/p/7202483.html</a></p>
<h2 id="数据过滤"><a href="#数据过滤" class="headerlink" title="数据过滤"></a>数据过滤</h2><ol>
<li>Stream Filter</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">    List&lt;String&gt; strings = Arrays.asList(&quot;a1&quot;, &quot;a2&quot;, &quot;a3&quot;, &quot;b1&quot;, &quot;b2&quot;, &quot;b3&quot;);</span><br><span class="line">    List&lt;String&gt; filter = strings.stream().filter(str-&gt;str.startsWith(&quot;a&quot;)).collect(Collectors.toList());</span><br><span class="line">    System.out.println(filter);</span><br><span class="line">```  </span><br><span class="line"></span><br><span class="line">先让字符向量变成流(`stream()`)，然后设置过滤条件(`filter()`)，最后收集(`collect(Collectors.toList())`)</span><br><span class="line"></span><br><span class="line">2. StringBuilder</span><br></pre></td></tr></table></figure>

<pre><code>StringBuilder sb = new StringBuilder();
System.out.println(sb);
sb.append(&quot;hello&quot;);
System.out.println(sb);//打印出来为hello</code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## **Date**和**SimpleDateFormat**</span><br><span class="line"></span><br><span class="line">建立SimpleDateFormat实例的时候要写出结构</span><br><span class="line"></span><br><span class="line">例：</span><br></pre></td></tr></table></figure>

<p>SimpleDateFormat sdf = new SimpleDateFormat(“yyyy/MM/dd HH:mm:ss”);</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">### Date常用方法</span><br><span class="line"></span><br><span class="line">1. getTime：获取毫秒数，返回值为long</span><br><span class="line"></span><br><span class="line">2. Date1.before(Date2)：比较Date1是否在Date2之前</span><br><span class="line"></span><br><span class="line">3. Date1.after(Date2)：比较Date1是否在Date2之后</span><br><span class="line"></span><br><span class="line">### SimpleDateFormat常用方法</span><br><span class="line"></span><br><span class="line">1. format(Date实例)：获取格式时间（建立实例时设置格式）</span><br></pre></td></tr></table></figure>

<p>sdf.format(day1)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. parse()：括号里为格式型的时间字符串，返回值为Date</span><br></pre></td></tr></table></figure>

<p>Date day2 = sdf.parse(“1988/5/3 15:23:16”);<br>```</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/16/Java知识点-1/" data-id="ck4r400rc007al0w0kh3ngiyn" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Java/">Java</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/8/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/7/">7</a><a class="page-number" href="/page/8/">8</a><span class="page-number current">9</span><a class="page-number" href="/page/10/">10</a><a class="page-number" href="/page/11/">11</a><a class="page-number" href="/page/12/">12</a><a class="extend next" rel="next" href="/page/10/">Next &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>